"use client"

import UiButton from "@/components/ui/UiButton"
import { UiFormRoot, UiFormItem, UiFormSubmit } from "@/components/ui/UiForm"
import UiModal from "@/components/ui/UiModal"
import { TextFieldInput } from "@radix-ui/themes"
import { useCallback, useRef, useState } from "react"

const PhoneModal = () => {
    const [open, setOpen] = useState(false);
    const onOpen = useCallback(() => setOpen(true), []);
    const onCancel = useCallback(() => setOpen(false), []);
    const ref = useRef<HTMLButtonElement>(null);
    const [loading, setLoading] = useState(false);
    const onSubmit = useCallback((data: any) => {
        setLoading(true);
        console.log(data);
        setTimeout(() => {
            setLoading(false);
        }, 3000)
        return false;
    }, []);
    const onFinish = useCallback(() => {
        ref.current?.click()
    }, []);
    return (
        <div>
            <UiModal loading={loading} title="修改手机" description="暂无法修改" onFinish={onFinish} onCancel={onCancel} open={open}>
                <UiFormRoot onSubmit={onSubmit}>
                    <UiFormItem name="text" label="手机号" valueMissing="null" required>
                        <TextFieldInput required />
                    </UiFormItem>
                    <UiFormItem name="text1" typeMismatch="emailemailemailemailemailemailemail" valueMissing="不能为空" label="确认密码" required>
                        <TextFieldInput required type="password" />
                    </UiFormItem>
                    <UiFormSubmit ref={ref} className="hidden" />
                </UiFormRoot>
            </UiModal>
            <UiButton onClick={onOpen}>修改手机</UiButton>
        </div>
    )
}
export default PhoneModal